<template>
  <div class="musiclist">
    <!-- 选择更换音乐类型 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="musicTypeValue" :options="musicTypeOption" v-on:change="valueChange" />
    </van-dropdown-menu>
    <!-- 音乐列表 -->
    <van-list :offset="500" v-if="changeListShow" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in currentMusicList" :key="item.id" v-on:click="$router.push(`/play?id=${item.id}`)">
        <template>
          <div class="music_s">
            <div class="m_name">{{item.name}}</div>
            <div class="s_name">{{item.artists[0].name}}</div>
          </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 加载loading -->
    <van-loading v-else color="red" vertical size="35px" text-size="18px">加载中...</van-loading>
  </div>
</template>

<script>
import { getZuixinsong } from '../../../utils/api'
export default {
  name: 'MusicList',
  data () {
    return {
      // 当前选择音乐类型
      musicTypeValue: 0,
      // 全部音乐类型
      musicTypeOption: [{
        text: '全部',
        value: 0
      }, {
        text: '华语',
        value: 7
      }, {
        text: '欧美',
        value: 96
      }, {
        text: '日本',
        value: 8
      }, {
        text: '韩国',
        value: 16
      }],
      // 全部音乐列表
      allMusicList: [],
      // 当前的音乐数组
      currentMusicList: [],
      // 每次限制的数量
      limit: 15,
      loading: false,
      finished: false,
      // 音乐总数
      total: 0,
      // 每次开始的offset
      offset: 0,
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      changeListShow: true
    };
  },
  methods: {
    // 获取音乐分类对应的音乐内容
    async getMusicListFn () {
      let result = await getZuixinsong(this.musicTypeValue);
      if (result.code === 200) {
        this.allMusicList = result.data;
        this.total = result.data.length;
        this.currentMusicList = result.data.slice(0, this.limit);
        this.offset = this.limit;
        this.finished = false;
      }
    },
    // 加载数据
    onLoad () {
      // 异步更新数据
      this.currentMusicList.push(...this.allMusicList.slice(this.offset, this.offset + this.limit));
      this.offset = this.offset + this.limit;
      this.loading = false;
      // 数据全部加载完成
      if (this.currentMusicList.length >= this.total) {
        this.finished = true;
      }
    },
    // 切换音乐类型
    async valueChange (type) {
      // 返回顶部
      window.scroll(0, 0);
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      this.changeListShow = false;
      this.currentMusicList = [];
      let result = await getZuixinsong(type);
      if (result.code === 200) {
        this.allMusicList = result.data;
        this.total = result.data.length;
        this.currentMusicList = result.data.slice(0, this.limit);
        this.offset = this.limit;
        this.finished = false;
        // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
        this.changeListShow = true;
      }
    }
  },
  mounted () {
    this.getMusicListFn();
  }
}
</script>

<style lang="less" scoped>
	.musiclist{
		padding-top: 100/50rem;
	}
	.van-dropdown-menu{
		/deep/ .van-dropdown-menu__bar{
			position: fixed;
			width: 100%;
			z-index: 1;
			box-shadow: none;
			height: 100/50rem;
		/deep/ .van-dropdown-menu__title{
				font-size: 0.65rem;
				line-height: 1.3;
			}
		}
		/deep/ .van-cell__title{
			font-size: 0.62rem;
		}
    /deep/ .van-ellipsis{
      font-size: 0.6rem;
    } 
	}
	.van-cell{
    height: 130/50rem;
    line-height: 1.4;
    .van-cell__value{
      .music_s{
        div:nth-child(1){
          font-size: 0.7rem;
        }
        div:nth-child(2){
          color: #888;
          font-size: 28/50rem;
        }
        &::before{
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          width: 0;
          height: 0;
          transform: translateY(-50%);
          display: inline-block;
          border: 20/50rem solid transparent;
          border-left-color: #ccc;
        }
      }
    }
  }
  .van-loading{
    padding-top: 3rem;
  }
	.van-list{
    margin-bottom: 70/50rem;
    /deep/ .van-list__finished-text{
      height: 100/50rem;
      line-height: 70/50rem;
      font-size: 28/50rem;
    }
  }
</style>